<template>
  <div>
    <Row>
      <Col span="24">
        <Table :no-data-text="noDataText" height="300" :loading="loading" :data="items" :columns="columns">
        </Table>
      </Col>
      <Col span="24">
        <div style="display: flex;justify-content: flex-end;margin-top:15px;">
          <Page
            transfer
            show-total
            :page-size-opts="[10, 20, 30]"
            @on-page-size-change="changeLimit"
            show-sizer @on-change="load"
            :page-size="query.limit"
            :current.sync="query.page"
            :total="total" size="small" />
          </div>
      </Col>
    </Row>
  </div>
</template>
<script>
import { fetchImportOrganizations } from '@/graphql/query/organization/index'
import emptyDataPNG from '@/assets/icons/empty_data.png'
export default {
  data () {
    return {
      emptyDataPNG,
      columns: [
        {
          title: '序号',
          render: (h, params) => {
            const { limit, page } = this.query
            const startNumber = limit * (page - 1)
            const items = []
            items.push(
              h('span', {
              }, startNumber + params.index + 1)
            )
            return h('span', items)
          },
          width: 60,
          align: 'center'
        },
        {
          title: '班级分类',
          width: 120,
          key: 'cateName',
          render (h, params) {
            const { cateName } = params.row
            if (!cateName || cateName === '') {
              return h('span', '-')
            }
            return h('span', cateName)
          }
        },
        {
          title: '班级名称',
          width: 120,
          key: 'name',
          render (h, params) {
            const { name } = params.row
            if (!name || name === '') {
              return h('span', '-')
            }
            return h('span', name)
          }
        },
        {
          title: '班级课时费',
          width: 120,
          key: 'periodMoney',
          render: (h, params) => {
            const { periodMoney } = params.row
            return h('span', typeof (periodMoney) !== 'number' ? '-' : periodMoney)
          }
        },
        {
          title: '最大人数',
          width: 120,
          key: 'maxPeople',
          align: 'center',
          render (h, params) {
            const { maxPeople } = params.row
            return h('span', typeof (maxPeople) !== 'number' ? '-' : maxPeople)
          }
        },
        {
          title: '默认购买课时数',
          width: 120,
          key: 'defaultBuyHours',
          align: 'center',
          render (h, params) {
            const { defaultBuyHours } = params.row
            return h('span', typeof (defaultBuyHours) !== 'number' ? '-' : defaultBuyHours)
          }
        },
        {
          title: '状态',
          width: 80,
          key: 'validatorStatus',
          align: 'center',
          render: (h, params) => {
            const { importStatus } = params.row
            let type = 'ios-checkmark-circle-outline'
            let color = 'green'
            if (importStatus === 'error') {
              type = 'ios-close-circle-outline'
              color = 'red'
            } else if (importStatus === 'exist') {
              type = 'ios-alert-outline'
              color = '#ff9900'
            }
            return h('Icon', {
              props: {
                type,
                color
              },
              style: {
                fontSize: '24px'
              }
            })
          }
        },
        {
          title: '备注',
          width: 120,
          key: 'remark',
          align: 'center',
          render (h, params) {
            const { remark } = params.row
            if (!remark || remark === '') {
              return h('span', '-')
            }
            return h('span', remark)
          }
        },
        {
          title: '说明',
          minWidth: 300,
          key: 'logs',
          align: 'center',
          render: (h, params) => {
            const { importLogs, importStatus } = params.row
            let color = 'green'
            if (importStatus === 'error') {
              color = 'red'
            } else if (importStatus === 'exist') {
              color = '#ff9900'
            }
            const items = []
            for (let index = 0; index < importLogs.length; index++) {
              const element = importLogs[index]
              items.push(h('span', element))
            }
            return h('span', {
              style: {
                color,
                display: 'flex',
                flexDirection: 'column'
              }
            }, items)
          }
        }
      ],
      items: [],
      query: {
        limit: 20,
        page: 1,
        job: ''
      },
      total: 0,
      loading: false
    }
  },
  methods: {
    changeLimit (limit) {
      this.query.limit = limit
      this.$nextTick(() => this.load(1))
    },
    reload (job) {
      this.query.job = job
      this.load(1)
    },
    load (page) {
      if (this.loading) {
        return false
      }
      this.loading = true
      const { limit, job } = this.query
      const input = { input: {
        job,
        limit,
        page
      } }
      fetchImportOrganizations(input).then(res => {
        const { import_organizations } = res.data
        const data = import_organizations
        this.query.page = data.current_page
        this.query.limit = data.limit
        this.items = data.data
        this.total = data.total
        this.$emit('on-change-total', this.total)
        this.loading = false
      }).catch(() => (this.loading = false))
    }
  },
  computed: {
    noDataText () {
      const { emptyDataPNG } = this
      const style = 'margin: 15px 0px;display: flex;justify-content: center;flex-direction: column;align-items: center;'
      return `<div style="${style}"><img style="width:150px;" src="${emptyDataPNG}" alt="" /><span>暂无数据</span></div>`
    }
  }
}
</script>
